<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电影</title>
    <link type="text/css" rel="stylesheet" href="/static/css/style.css"/>
    <script src="/static/script/jquery-1.7.2.js"></script>
    <script>
        $(function (){
            //获取电影的状态
            var filmState = "{{.FilmState}}"
            //获取电影类型
            var filmType = "{{.FilmType}}"
            //获取电影区域
            var zone = "{{.Zone}}"
            //给筛选的按钮绑定单击事件
            $(".sub").click(function (){
                //获取电影状态
                filmState = $(this).val();
                location = "/showFilms?filmState="+filmState+"&filmType="+filmType+"&zone="+zone;
            });
            $(".type").click(function (){
                //获取电影类型
                filmType = $(this).val()
                location = "/showFilms?filmState="+filmState+"&filmType="+filmType+"&zone="+zone;
            });
            $(".zone").click(function (){
                //获取电影区域
                zone = $(this).val()
                location = "/showFilms?filmState="+filmState+"&filmType="+filmType+"&zone="+zone;
            });
            var sub = document.getElementsByClassName("sub")
            for(var i=0;i<sub.length;i++) {
                var state = sub[i].value
                if(state === filmState){
                    sub[i].setAttribute("style","background-color: #b8dee7;width: 150px;height: 60px;margin: 10px;color: brown;font-size: 20px;font-family: '宋体';");
                } else {
                    sub[i].onmouseover = function () {
                        this.setAttribute("style","background-color: #b8dee7;width: 150px;height: 60px;margin: 10px;color: brown;font-size: 20px;font-family: '宋体';");
                    }
                    sub[i].onmouseout = function () {
                        this.setAttribute("style","background-color: cadetblue;width: 150px;height: 60px;margin: 10px;color: brown;font-size: 20px;font-family: '宋体';");
                    }
                }
            }

            var types = document.getElementsByClassName("type")
            for(var i=0;i<types.length;i++){
                var value = types[i].value
                if (value === filmType) {
                    types[i].setAttribute("style","background-color: cadetblue;border: 0px;font-size: 14px");
                } else {
                    types[i].setAttribute("style","background-color: white;border: 0px;font-size: 14px")
                    types[i].onmouseover = function () {
                        this.setAttribute("style","background-color: cadetblue;border: 0px;font-size: 14px");
                    }
                    types[i].onmouseout = function () {
                        this.setAttribute("style","background-color: white;border: 0px;font-size: 14px")
                    }
                }
            }

            var zones = document.getElementsByClassName("zone")
            for(var i=0;i<zones.length;i++){
                var value = zones[i].value
                if (value === zone) {
                    zones[i].setAttribute("style","background-color: cadetblue;border: 0px;font-size: 14px");
                } else {
                    zones[i].setAttribute("style","background-color: white;border: 0px;font-size: 14px")
                    zones[i].onmouseover = function () {
                        this.setAttribute("style","background-color: cadetblue;border: 0px;font-size: 14px");
                    }
                    zones[i].onmouseout = function () {
                        this.setAttribute("style","background-color: white;border: 0px;font-size: 14px")
                    }
                }
            }

            var buy = document.getElementsByClassName("buy")
            for(var i=0;i<buy.length;i++) {
                buy[i].onmouseover = function () {
                    this.setAttribute("style","background-color: cadetblue");
                }
                buy[i].onmouseout = function () {
                    this.setAttribute("style","background-color: #b8dee7;")
                }
            }
        });
    </script>
</head>
<body>
    <!--第一行-->
    <div id="header">
    <table>
        <tr>
            <td>
                <span><img src="/static/img/logo.png" style="float: left;border-radius: 52px"></span>
                <span id="index_logo"><a href="/" style="color:red;margin-top: 10px;float: left;vertical-align: middle;">猫眼电影</a></span>
            </td>

            <td><a href="/main">首页</a></td>
            <td style="background-color: cadetblue"><a href="/">电影</a></td>
            <td><a href="/selectFilm">影院</a></td>
            <td><a href="/filmList">榜单</a></td>
            <td>
                <form action="/selectFilm" method="post">
                    <input class="search" type="search" placeholder="找影视剧" autocomplete="off" name="filmName"><input class="submit" type="submit" value="搜索">
                </form>
            </td>
            <td><a href="/login">
                {{if .IsLogin}}
                <img src="{{.User.ImgPath}}" style="width: 50px;border-radius: 50px;border: 2px solid darkblue">
                {{else}}
                <img src="/static/img/0.png" style="width: 50px;border-radius: 50px;border: 2px solid darkblue">
                {{end}}
            </a></td>
        </tr>
    </table>
</div>
    <!--第二行-->
    <div id="second"><input type="button" value="正在热映" class="sub" style="background-color: cadetblue;width: 150px;height: 60px;margin: 10px;color: brown;font-size: 20px;font-family: '宋体';">
        <input type="button" value="即将上映" class="sub" style="background-color: cadetblue;width: 150px;height: 60px;margin: 10px;color: brown;font-size: 20px;font-family: '宋体';">
    </div>
    <!--第三行-->
    <div id="third">
        <div>类型：
            {{range .FilmTypes}}
            <span><input name="subs" class="type" type="button" value="{{.}}" style="background-color: white;border: 0px;font-size: 14px"></span>
            {{end}}
        </div>
        <hr style="width: 90%;color: lightgray">
        <div>区域：
            {{range .Zones}}
            <span><input name="subs" class="zone" type="button" value="{{.}}" style="background-color: white;border: 0px;font-size: 14px"></span>
            {{end}}
        </div>
    </div>
    <!--第四行-->
    <div style="width: 1000px;margin: auto;padding: 20px;text-align: center">
        {{range .Films}}
            <div style="float: left;margin: 40px">
                <div><img src={{.ImgPath}} style="width: 160px;height: 250px"></div>
                <span><form method="post" action="/filmPage?filmName={{.FilmName}}"><input name="subs" class="buy" type="submit" value="{{.FilmName}}"></form></span>
            </div>
        {{else}}
         ┭┮﹏┭┮，没有找到相关结果，请尝试其他条件筛选吧~
        {{end}}
    </div>
</body>
</html>